<!DOCTYPE html>
<html style="height: 100%;overflow: hidden;">
<head>
    <meta charset="utf-8"/>
    <title>地图</title>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=de9fba522344d32180b89ffa3667b3e3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body style="height: 100%;margin: 0;">
<div id="app">
    <div id="tdtMapDivID"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            map: null,
            mapdata: [],
            TMaplnglats: [],
            mapLngLat: {},
            livedialogVisible: false,
            flvUrl: "",
            markreData: {},
            token: "",
            http: ""
        },
        created() {
        },
        mounted() {
            let url = window.location.href;
            let token = /[?&]token=([^&#]+)/;
            let http = /[?&]http=([^&#]+)/;
            this.token = decodeURIComponent(url.match(token)[1]);
            this.http = decodeURIComponent(url.match(http)[1]);
            this.getMapList();
            this.initMap();
            setTimeout(() => {
                this.map.checkResize();
            }, 1000);

        },
        methods: {
            getMapList() {
                axios.get(`${this.http}/KxStation/kxstation/getMapList`, {
                    headers: {
                        'token': this.token
                    }
                })
                    .then((response) => {
                        // console.log(response.data.data);
                        this.mapdata = response.data.data;
                        this.intiAddMarsk();
                        this.findMarsk(response.data.data[0].id)
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            initMap() {
                let T = window.T;
                //地图实例
                this.map = new T.Map("tdtMapDivID");
                // 去掉水印
                document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = "none";
                //创建卫星和路网的混合视图
                this.map.setMapType(window.TMAP_HYBRID_MAP);
                this.map.centerAndZoom(new T.LngLat(103.388611, 35.563611), 5);
            },
            intiAddMarsk() {
                // 加载点位图标
                console.log(this.mapdata)
                if (this.mapdata != null && this.mapdata.length > 0) {
                    let maxl = this.mapdata[0].lng84,
                        minl = this.mapdata[0].lng84,
                        maxb = this.mapdata[0].lat84,
                        minb = this.mapdata[0].lat84;
                    for (var i = 0; i < this.mapdata.length; i++) {
                        this.TMaplnglats.push(new T.LngLat(this.mapdata[i].lng84, this.mapdata[i].lat84));
                        this.addMarker(this.mapdata[i], T, false);

                        if (this.mapdata[i].lng84 === null || this.mapdata[i].lat84 === null) {
                            continue;
                        }

                        if (this.mapdata[i].lng84 > maxl) maxl = this.mapdata[i].lng84;
                        if (this.mapdata[i].lng84 < minl) minl = this.mapdata[i].lng84;
                        if (this.mapdata[i].lat84 > maxb) maxb = this.mapdata[i].lat84;
                        if (this.mapdata[i].lat84 < minb) minb = this.mapdata[i].lat84;
                    }

                    let cenLng = (parseFloat(maxl) + parseFloat(minl)) / 2;
                    let cenLat = (parseFloat(maxb) + parseFloat(minb)) / 2;
                    let zoom = this.getZoom(maxl, minl, maxb, minb);
                    console.log(cenLng, cenLat, zoom)
                    this.map.centerAndZoom(new T.LngLat(cenLng, cenLat), zoom);
                } else {
                    //没有坐标，显示全中国
                    this.map.centerAndZoom(new T.LngLat(103.388611, 35.563611), 5);
                }
            },
            // 计算地图缩放比例
            getZoom(maxLng, minLng, maxLat, minLat) {
                var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000",
                    "50000", "100000", "200000", "500000", "1000000", "2000000"
                ] //级别18到3。
                var pointA = new T.LngLat(maxLng, maxLat); // 创建点坐标A
                var pointB = new T.LngLat(minLng, minLat); // 创建点坐标B
                var distance = this.map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
                for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                    if (zoom[i] - distance > 0) {
                        return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                }
            },
            // 查找id对应信息
            findMarsk(id) {
                for (let item of this.mapdata) {
                    if (item.id === id) {
                        this.markreData = item
                        break;
                    }
                }
                if (this.markreData.lng84 != null && this.markreData.lat84 != null) {
                    this.marsktu(this.markreData.lng84, this.markreData.lat84)
                } else {
                    this.$message.warning(this.markreData.name + "杆塔暂无坐标信息！");
                }
            },
            // 点位寻找
            marsktu(lng, lat) {
                let T = window.T;
                // this.map.clearOverLays();
                this.map.centerAndZoom(new T.LngLat(lng, lat), 16);
                // 定义该矩形的显示区域
                let circle = new T.Circle(new T.LngLat(lng, lat), 40, {
                    color: "red",
                    weight: 3,
                    opacity: 0.5,
                    fillColor: "#FFFFFF",
                    fillOpacity: 0.1,
                    lineStyle: "solid"
                });
                //向地图上添加圆
                // this.map.addOverLay(circle);
                this.addMarker(this.markreData, T, true);
            },
            addMarker(markdata, T, flag) {
                let marker;
                let icon;
                let point;
                let url0 = "./img/inf.png"; //离线
                let url1 = "./img/green.png"; //在线
                let url2 = "./img/red.png"; //报警
                if (markdata.status === "offline") {
                    // 离线
                    icon = new T.Icon({
                        iconUrl: url0,
                        iconSize: new T.Point(50, 50),
                        iconAnchor: new T.Point(15, 52)
                    });
                } else if (markdata.status === "normal") {
                    //正常
                    icon = new T.Icon({
                        iconUrl: url1,
                        iconSize: new T.Point(50, 50),
                        iconAnchor: new T.Point(15, 52)
                    });
                } else {
                    //报警
                    icon = new T.Icon({
                        iconUrl: url2,
                        iconSize: new T.Point(50, 50),
                        iconAnchor: new T.Point(15, 52)
                    });
                }

                point = new T.LngLat(markdata.lng84, markdata.lat84);
                marker = new T.Marker(point, {
                    icon: icon
                }); // 创建标注

                // if(!flag){
                this.map.addOverLay(marker); // 将标注添加到地图中
                // }

                // 相机
                let flvbuttone = ""
                if (markdata.cameraDTOS != null) {
                    markdata.cameraDTOS.forEach((item) => {
                        flvbuttone =
                            `<button style="margin-right: 6px" onclick=playflv(${JSON.stringify(item)})>${item.name}</button>` +
                            flvbuttone
                    })
                }
                // <p style="margin: 10px 0">${flvbuttone}</p>

                let content = ` <div class="xxdiv">
					        <p style="font-size: 16px; text-align:center;color: #000000; font-weight:bold; margin: 0px; margin-bottom: 10px">${markdata.name}</p>
					        <p style="color: #000000; margin: 4px 0px 4px 0px;">
					          <span style="">经度：${markdata.lng}</span>
					          <span style="margin-left: 10px;"> 纬度：${markdata.lat}</span>
					        </p>
					      </div>`;
                if (flag) {
                    let markerInfoWin = new T.InfoWindow();
                    markerInfoWin.setContent(content);
                    marker.openInfoWindow(markerInfoWin, point); // 开启信息窗口
                }

                // 双击开启信息窗口
                // dblclick
                marker.addEventListener("click ", function () {
                    let markerInfoWin = new T.InfoWindow();
                    markerInfoWin.setContent(content);
                    marker.openInfoWindow(markerInfoWin, point);
                });

                // 移入开启信息窗口
                // marker.addEventListener("mousedown ", function () {
                //   // let id = markdata.children ? markdata.children[0].id : markdata.id;
                //   let markerInfoWin = new T.InfoWindow();
                //   markerInfoWin.setContent(content);
                //   marker.openInfoWindow(markerInfoWin, point);
                // });

                // 关闭信息窗口
                // marker.addEventListener("mouseup ", function () {
                //   let markerInfoWin = new T.InfoWindow();
                //   markerInfoWin.setContent(content);
                //   marker.closeInfoWindow(markerInfoWin, point);
                // });
            },
            playflv(data) {
                console.log(data)
                // let camer = JSON.parse(data);
                // console.log(data.gbFlv)
                // alert(JSON.parse(camer.gbFlv))
                this.livedialogVisible = true;
                // this.flvUrl = "ws://10.36.10.18:8080" + "/wsGbLive" + data.gbFlv;
                this.flvUrl = app.httpgbflv + data.gbFlv;

            }
        }
    })
</script>
<style scoped lang="scss">
  #app {
    width: 100%;
    height: 100%;
  }

  #tdtMapDivID {
    width: 100%;
    height: 100%;
  }

  .xxdiv {
    z-index: 599;
  }

  .tdt-infowindow-content-wrapper,
  .tdt-infowindow-tip {
    //background: #535151 !important;
    border-radius: 20px !important;
  }

  ::v-deep .tdt-infowindow-content-wrapper {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 12px;
    color: #FFFFFF;
    background-color: transparent;
    background-image: url("./img/mapxx_bj.png");
    background-size: 100% 100%;
  }
</style>
</body>
</html>
